<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 40px 20px 20px;
            font-family: 'Roboto', sans-serif;
            background: #222;
        }
        .container {
            margin: 0 auto;
        }
        #table {
            width: 1260px;
            margin-bottom: 20px;
        }
        #table-lanthanoids,
        #table-actinoids {
            width: 1050px;
        }
        .element {
            position: relative;
            float: left;
            width: 70px;
            height: 70px;
            text-align: center;
            color: white;
            font-size: 11px;
            font-weight: 100;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
            text-decoration: none;
            transition: all 0.2s ease-in-out;
        }
        .element .symbol {
            line-height: 70px;
            font-size: 240%;
            font-weight: 300;
        }
        .element .id,
        .element .mass {
            position: absolute;
            opacity: 0.9;
        }
        .element .id {
            top: 2px;
            left: 2px;
        }
        .element .mass {
            bottom: 2px;
            left: 0;
            right: 0;
        }
        .element.noble {
            background: -webkit-linear-gradient(top left, #7e57c2, #673ab7);
            background: -moz-linear-gradient(top left, #7e57c2, #673ab7);
            background: -ms-linear-gradient(top left, #7e57c2, #673ab7);
            background: -o-linear-gradient(top left, #7e57c2, #673ab7);
            background: linear-gradient(top left, #7e57c2, #673ab7);
        }
        .element.alkali {
            background: -webkit-linear-gradient(top left, #ef5350, #f44336);
            background: -moz-linear-gradient(top left, #ef5350, #f44336);
            background: -ms-linear-gradient(top left, #ef5350, #f44336);
            background: -o-linear-gradient(top left, #ef5350, #f44336);
            background: linear-gradient(top left, #ef5350, #f44336);
        }
        .element.alkaline {
            background: -webkit-linear-gradient(top left, #ff7043, #ff5722);
            background: -moz-linear-gradient(top left, #ff7043, #ff5722);
            background: -ms-linear-gradient(top left, #ff7043, #ff5722);
            background: -o-linear-gradient(top left, #ff7043, #ff5722);
            background: linear-gradient(top left, #ff7043, #ff5722);
        }
        .element.transition {
            background: -webkit-linear-gradient(top left, #ff9800, #fb8c00);
            background: -moz-linear-gradient(top left, #ff9800, #fb8c00);
            background: -ms-linear-gradient(top left, #ff9800, #fb8c00);
            background: -o-linear-gradient(top left, #ff9800, #fb8c00);
            background: linear-gradient(top left, #ff9800, #fb8c00);
        }
        .element.poor {
            background: -webkit-linear-gradient(top left, #66bb6a, #4caf50);
            background: -moz-linear-gradient(top left, #66bb6a, #4caf50);
            background: -ms-linear-gradient(top left, #66bb6a, #4caf50);
            background: -o-linear-gradient(top left, #66bb6a, #4caf50);
            background: linear-gradient(top left, #66bb6a, #4caf50);
        }
        .element.metalloid {
            background: -webkit-linear-gradient(top left, #26c6da, #00bcd4);
            background: -moz-linear-gradient(top left, #26c6da, #00bcd4);
            background: -ms-linear-gradient(top left, #26c6da, #00bcd4);
            background: -o-linear-gradient(top left, #26c6da, #00bcd4);
            background: linear-gradient(top left, #26c6da, #00bcd4);
        }
        .element.nonmetal {
            background: -webkit-linear-gradient(top left, #42a5f5, #2196f3);
            background: -moz-linear-gradient(top left, #42a5f5, #2196f3);
            background: -ms-linear-gradient(top left, #42a5f5, #2196f3);
            background: -o-linear-gradient(top left, #42a5f5, #2196f3);
            background: linear-gradient(top left, #42a5f5, #2196f3);
        }
        .element.halogen {
            background: -webkit-linear-gradient(top left, #5c6bc0, #3f51b5);
            background: -moz-linear-gradient(top left, #5c6bc0, #3f51b5);
            background: -ms-linear-gradient(top left, #5c6bc0, #3f51b5);
            background: -o-linear-gradient(top left, #5c6bc0, #3f51b5);
            background: linear-gradient(top left, #5c6bc0, #3f51b5);
        }
        .element.lanthanoid {
            background: -webkit-linear-gradient(top left, #7e57c2, #673ab7);
            background: -moz-linear-gradient(top left, #7e57c2, #673ab7);
            background: -ms-linear-gradient(top left, #7e57c2, #673ab7);
            background: -o-linear-gradient(top left, #7e57c2, #673ab7);
            background: linear-gradient(top left, #7e57c2, #673ab7);
        }
        .element.actinoid {
            background: -webkit-linear-gradient(top left, #ab47bc, #9c27b0);
            background: -moz-linear-gradient(top left, #ab47bc, #9c27b0);
            background: -ms-linear-gradient(top left, #ab47bc, #9c27b0);
            background: -o-linear-gradient(top left, #ab47bc, #9c27b0);
            background: linear-gradient(top left, #ab47bc, #9c27b0);
        }
        #el2 {
            margin-left: 1120px;
        }
        #el5,
        #el13 {
            margin-left: 700px;
        }
        .clearfix {
            clear: both;
        }
        .transp {
            opacity: 0.25;
        }
    </style>
    <script src="../js/jquery.js"></script>
</head>
<body>
<div id="table" class="container"></div>
<div id="table-lanthanoids" class="container"></div>
<div id="table-actinoids" class="container"></div>
</body>
</html>

<script>
    var selectedGroup = '';

    // generate element block
    function genEl(e, container) {

        var c = e.group.toLowerCase().split(' ');

        var html = $('<a class="element"></a>').addClass(c[0]);

        if (c[1] && c[1] != 'innerborder') html.addClass(c[1]);
        if (e.number == 1) html.addClass('nonmetal');
        if (e.molar) html.attr('href', 'http://en.wikipedia.org/wiki/' + e.name).attr('target', '_blank');

        if (e.molar) {
            html.attr('id', 'el' + e.number)
                    .attr('title', e.name)
                    .append('<span class="id">' + e.number + '</span>')
                    .append('<span class="symbol">' + e.small + '</span>')
                    .append('<span class="mass">' + parseFloat(e.molar).toFixed(3) + '</span>');
        } else {
            html.attr('id', 'el' + e.small)
                    .append('<span class="id">' + e.small + '</span>');
        }

        container.append(html);
    }

    // add clearfix
    function clearfix(container) {
        container.append('<div class="clearfix"></div>');
    }

    // on mouseenter > hide other groups
    $('body').on('mouseenter', '.element', function() {

        var c = $(this).attr('class');

        if (c != selectedGroup) {
            selectedGroup = c;

            $('body').find('.element').each(function() {
                if ($(this).attr('class') != c) {
                    $(this).addClass('transp');
                } else {
                    console.log($(this).attr('class'), c);
                }
            });
        }
    });

    // on mouseleave > clear transparency
    $('body').on('mouseleave', '.element', function(e) {

        var c = $(this).attr('class');

        if (c != $(e.toElement).attr('class') || !$(e.toElement).hasClass('element')) {

            selectedGroup = '';

            $('.element')
                    .removeClass('focus')
                    .removeClass('transp');
        }
    });

    // get JSON data
    $.getJSON('../js/periodicTable.json', function(data) {

        console.log(data);

        // build main table
        for (var i = 0; i < data.table.length; i++) {
            for (var j = 0; j < data.table[i].elements.length; j++) {
                genEl(data.table[i].elements[j], $('#table'));
            }
            clearfix($('#table'));
        }

        // build lanthanoids table
        for (var i = 0; i < data.lanthanoids.length; i++) {
            genEl(data.lanthanoids[i], $('#table-lanthanoids'));
        }
        clearfix($('#table-lanthanoids'));

        // build actinoids table
        for (var i = 0; i < data.actinoids.length; i++) {
            genEl(data.actinoids[i], $('#table-actinoids'));
        }
        clearfix($('#table-actinoids'));
    });
</script>